<template>
  <div class="repay repay-detail">
    <HederTop title="Repayment"></HederTop>

    <!--借款详情-->
    <preview
      :repayType = "repayType"
      :data="previewData"
      @couponAmount="handleCouponAmount"
      :repay-code="repayCode"
      :type="type"
      :payintype='payinType'
      :extensionamount='extensionamount'
    ></preview>

    <div class="detail-main">
      <div class="repay_type_title">{{ repayType }}</div>
      <div class="repay_panel">
        <ul class="repay_step">
          <li v-for="(item, $index) in repayStep">
            <span class="index">{{ $index + 1 }}</span>
            <span class="repay-text" v-html="item"></span>
          </li>
          <!--          <li v-if="'Instapay' === repayType" class="instapay">DCpay、Grabpay,、Gcash、 PayMaya、USSC Money、AUB and other mainstream banks</li>-->
        </ul>
        <div v-if="companyCode==5&&repayType=='Instapay'" style="margin-bottom:20px;text-align:center">** Any channel that supports Transfer can pay **</div>
        <div v-if="repayType=='QR'" class="qr-tips">Electronic wallet that supports repayment:<p>Gcash/Paymaya/ShopeePay/BDOPay/GrabPay</p></div>
        <a class="help_link" @click="goHelp" href="javascript:void(0);">Help Center</a>
      </div>
    </div>

    <!--我要还款按钮-->
    <div v-if="'7-11' === repayType || repayType === 'Instapay' || repayType === 'QR'" class="repay_btn_warp btn-box">
      <button @click="handleShowConfirmDialog" class="btn-ui btn_repay">Repayment</button>
    </div>
    <div v-if="['4'].includes(companyCode)&&['ECPay','M Lhuillier','Gcash','Paymaya'].includes(repayType)"
         class="repay_btn_warp btn-box">
      <button @click="handleShowConfirmDialog" class="btn-ui btn_repay">Repayment</button>
    </div>
    <div v-else-if="['1', '4'].includes(companyCode) && repayType !== '7-11' && repayType !== 'Instapay'"
         class="repay_btn_warp btn-box">
      <button @click="handleShowConfirmDialog" class="btn-ui btn_repay">Go to {{ repayType }}</button>
    </div>

    <!--还款弹框信息确认弹框-->
    <van-dialog v-model="showConfirmDialog" class="Xendit_repay" show-cancel-button :before-close="beforeClose" closeOnClickOverlay>
      <div class="repay_info">
        <form>
          <div class="form_item Xendit">
            <div class="value">
              <input v-model="repayForm.amount" type="text" :disabled='payinType==="EXTENSION"'
                     placeholder="Repayment Amount">
              <span v-if="repayForm.amount&&payinType!=='EXTENSION'" @click="repayForm.amount=''"
                    class="btn_clear"></span>
            </div>

            <div v-if="minMoney > 0&&!['4'].includes(companyCode)"
                 :class="{'red_color':repayForm.amount <= minMoney}" class="tips">
              The amount entered must be greater than {{ minMoney }}
            </div>
          </div>
        </form>
      </div>
    </van-dialog>

    <!--展示还款码-->
    <div v-if="showRepayCode" class="show_repay_code">
     <!-- QR  -->
      <div class="repay_code_contain" v-if="repayType === 'QR'">
          <div class="repay_code_img">
            <img :src="repayCodeImg" alt="">
          </div>
          <div class="repay_code_copy">
            <p class="repay_tips error">The QR code is valid for 15 minutes. Please regenerate if it times out</p>
            <!-- <button @click="handleDown" class="download">Save</button> -->
          </div>
          <span @click="showRepayCode=false" class="btn_close"></span>
      </div>
      <div class="repay_code_contain repay_code_contain_new" v-else-if="repayType !== '7-11'">
        <div class="repay_code_copy">
          <div class="repay_code_copy_content">
            <p class="title">Repayment Code</p>
            <p class="code">{{ repayCode }}</p>
            <p @click="handleCopy" class="btn_copy">Copy</p>
          </div>
        </div>
        <span @click="showRepayCode=false" class="btn_close"></span>
      </div>

      <div class="repay_code_contain" v-else>
        <div class="repay_panel">
          <div class="repay_img">
            <div v-if="type === 'Xendit'" class="repay_tips van-ellipsis">
              Please show this code to the staff at “ {{ XRepayChannel.name }} ”
            </div>
            <div v-else class="repay_tips van-ellipsis">Please show this code to the staff at “ 7-11 ”</div>

            <div class="repay_code_copy">
              <div class="repay_code_copy_content">
                <div class="title">Contract Number</div>
                <div class="code">{{ repayCode }}</div>
                <p @click="handleCopy" class="btn_copy">Copy</p>
              </div>
            </div>

            <div class="repay_code_img">
              <img id="repayCodeImg" :src="repayCodeImg" alt="">
            </div>
          </div>
        </div>
        <!--关闭按钮-->
        <span @click="showRepayCode=false" class="btn_close"></span>
      </div>

    </div><!--展示还款码 end-->

  </div>
</template>

<script src="./main.js"></script>

<style lang="scss">
@import "../repay/index";
</style>
